<template>
        <tm-drawer :width="750" :height="900" ref="calendarView" :placement="pos" v-model:show="props.datePopup" @close="closeDrawer"
            hideHeader="true">
            <view class="astk">
                <view class="heeader">
                    <view class="age">出生日期</view>
                    <image src="/static/userinfo/colse.png" class="close" @tap="closeDrawer"></image>
                </view>
                <view class="select">
                    <view class="select-1">请选择您的出生日期</view>
                    <view class="select-2">{{age}}岁</view>
                </view>
                <view class="date">
                    <tm-time-view start="1900-01-01" :defaultValue="selectedDate" height="500" @change="changedate" format="YYYY-MM-DD" modelStr="YYYY-MM-DD"></tm-time-view>
                </view>

                <view class="btn_box d-flex a-center j-center">
                    <view class="btn_main_r" style="width:650rpx;" @tap="onGetGenders">
                        <text class="text">确定</text>
                    </view>

                     <!-- <tm-button class="btn_main" :width="690" :shadow="0" :linear-color="['#64F1C5', '#29DBA3']"
                    linear="left" :fontSize="32" fontColor="#ffffff" @tap="onGetGenders" label="确定"></tm-button> -->
                </view>

            </view>
        </tm-drawer>
</template>
<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    nextTick,
    computed,
    onMounted,
    handleError,
    defineProps,
    defineEmits,
    watchEffect
} from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import moment from 'moment'
const selectedDate = ref('2000-01-01');
const astk = ref(true);
const pos = ref('bottom');
const color: any = ref("#")
const props = defineProps({
    datePopup: Boolean,
    defaultDate:{
        type:String,
        default(){
            return '2000-01-01'
        }
    }
})

watchEffect(()=>{

    if(props.defaultDate){
        selectedDate.value = props.defaultDate;
    }
})



const age = computed(()=>{
    const now = moment();
    const birthday = moment(selectedDate.value)
    return Math.floor(now.diff(birthday, 'years', true))
})


const emit = defineEmits(['closeDatedatePopup', 'onGetDate'])


const closeDrawer = () => {
    emit("closeDatedatePopup", false);
}
const changedate = (e: any) => {
    selectedDate.value = e;
}
const onGetGenders = () => {

    const now = moment();
    const birthday = moment(selectedDate.value)

    const obj = {
        time:selectedDate.value,
        age:Math.floor(now.diff(birthday, 'years', true))
    }


    emit("onGetDate", obj);
    emit("closeDatedatePopup", false);
}
const openDate = () => {
}
</script>
<style lang="scss" scoped>
.astk {
    padding-bottom: calc(constant(safe-area-inset-bottom) + 50rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);

    .heeader {
        width: 750rpx;
        height: 100rpx;
        position: relative;

        .age {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 100rpx;
            text-align: center;

        }

        .close {
            width: 36rpx;
            height: 36rpx;
            position: absolute;
            top: 32rpx;
            right: 30rpx;
        }
    }

    .select {
        width: 750rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;

        .select-1 {
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #333333;
        }

        .select-2 {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
        }
    }

    .btn_box{
        width:750rpx;
        height:80rpx;
        margin-top:50rpx;
    }

    .btn_main {
        display: block;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
        z-index: 100;
    }

}

.uni-picker-view-indicator.uni-resize-sensor {
    color: pink !important;
}
</style>